// 该组件用于那些左右分开的常用页面结构，顶部内容由
slot="top_body"接收，底部内容由 slot="bottom_body"接收，左侧内容由
slot="left_body" 接收，右侧页面由 slot="right_body" 接收 // prop 属性 Theight
决定顶部内容的总高度， Bheight 决定底部内容的总高度
<template>
  <div class="body">
    <div class="top_body" :style="`height:${Theight}`" v-if="Theight">
      <slot name="top_body"></slot>
    </div>
    <div class="center_body">
      <section class="left_body">
        <slot name="left_body"></slot>
      </section>
      <section class="right_body">
        <slot name="right_body"></slot>
      </section>
    </div>
    <div class="bottom_body" :style="`height:${Bheight}`" v-if="Bheight">
      <slot name="bottom_body"></slot>
    </div>
    <slot> </slot>
  </div>
</template>

<script>
export default {
  name: 'iLRBox',
  props: {
    Theight: 0,
    Bheight: 0
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .top_body {
  }
  .center_body {
    flex: 1;
    display: flex;
    width: 100%;
    height: 100%;
    .left_body {
      box-sizing: border-box;
      width: 20%;
      height: 100%;
      padding: 0 0.3rem 100px;
      border-right: 0.15em dashed rgba(10, 10, 10, 0.3);
      overflow: auto;
    }
    .right_body {
      box-sizing: border-box;
      width: 80%;
      height: 100%;
      padding: 0 0.3rem 100px;
      overflow: hidden;
      overflow-y: auto;
    }
  }
  .bottom_body {
    height: 10%;
  }
}
</style>
